<template>
  <div class="profile-container">
    <!-- 用户信息卡片 -->
    <div class="user-info-card">
      <div class="user-avatar">
        <img :src="userInfo.avatar" :alt="userInfo.name" class="avatar-img">
        <button class="edit-avatar-btn">📷</button>
      </div>
      <div class="user-details">
        <h2>{{ userInfo.name }}</h2>
        <p class="user-title">{{ userInfo.title }}</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-number">{{ userInfo.totalSessions }}</span>
            <span class="stat-label">总课时</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userInfo.completedSessions }}</span>
            <span class="stat-label">已完成</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">{{ userInfo.memberDays }}</span>
            <span class="stat-label">会员天数</span>
          </div>
        </div>
      </div>
      <button class="edit-profile-btn">编辑资料</button>
    </div>

    <!-- 导航标签 -->
    <div class="profile-tabs">
      <button v-for="tab in tabs" :key="tab.id" 
              class="tab-button" 
              :class="{ active: activeTab === tab.id }"
              @click="activeTab = tab.id">
        {{ tab.label }}
      </button>
    </div>

    <!-- 我的课程 -->
    <div v-if="activeTab === 'courses'" class="tab-content">
      <div class="section-header">
        <h3>我的课程</h3>
        <div class="course-filters">
          <button v-for="filter in courseFilters" :key="filter.value"
                  class="filter-btn"
                  :class="{ active: activeCourseFilter === filter.value }"
                  @click="activeCourseFilter = filter.value">
            {{ filter.label }}
          </button>
        </div>
      </div>

      <div class="courses-grid">
        <div v-for="course in filteredCourses" :key="course.id" class="course-card">
          <div class="course-header">
            <div class="trainer-info">
              <img :src="course.trainer.avatar" :alt="course.trainer.name" class="trainer-avatar">
              <div>
                <h4>{{ course.trainer.name }}</h4>
                <p class="course-type">{{ course.type }}</p>
              </div>
            </div>
            <span class="course-status" :class="course.status">
              {{ getStatusText(course.status) }}
            </span>
          </div>
          
          <div class="course-details">
            <div class="course-time">
              <i class="time-icon">🕐</i>
              <span>{{ course.date }} {{ course.time }}</span>
            </div>
            <div class="course-location">
              <i class="location-icon">📍</i>
              <span>{{ course.location }}</span>
            </div>
            <div class="course-progress" v-if="course.status === 'ongoing'">
              <span>进度: {{ course.completedSessions }}/{{ course.totalSessions }} 课时</span>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: (course.completedSessions / course.totalSessions * 100) + '%' }"></div>
              </div>
            </div>
          </div>

          <div class="course-actions">
            <button v-if="course.status === 'upcoming'" @click="cancelCourse(course.id)" class="cancel-btn">
              取消课程
            </button>
            <button v-if="course.status === 'upcoming'" @click="reschedule(course.id)" class="reschedule-btn">
              改期
            </button>
            <button v-if="course.status === 'completed'" @click="rateCourse(course.id)" class="rate-btn">
              评价
            </button>
            <button v-if="course.status === 'ongoing'" @click="viewProgress(course.id)" class="progress-btn">
              查看进度
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 训练记录 -->
    <div v-if="activeTab === 'records'" class="tab-content">
      <div class="section-header">
        <h3>训练记录</h3>
        <button class="add-record-btn">添加记录</button>
      </div>

      <div class="records-timeline">
        <div v-for="record in trainingRecords" :key="record.id" class="record-item">
          <div class="record-date">
            <span class="date">{{ record.date }}</span>
            <span class="time">{{ record.time }}</span>
          </div>
          <div class="record-content">
            <div class="record-header">
              <h4>{{ record.title }}</h4>
              <span class="record-duration">{{ record.duration }}分钟</span>
            </div>
            <div class="record-details">
              <div class="trainer-info">
                <img :src="record.trainer.avatar" :alt="record.trainer.name" class="trainer-avatar-small">
                <span>教练: {{ record.trainer.name }}</span>
              </div>
              <div class="record-stats">
                <div class="stat">
                  <span class="label">消耗卡路里:</span>
                  <span class="value">{{ record.calories }}kcal</span>
                </div>
                <div class="stat">
                  <span class="label">训练强度:</span>
                  <span class="value">{{ record.intensity }}</span>
                </div>
              </div>
              <div class="record-exercises">
                <h5>训练项目:</h5>
                <div class="exercise-tags">
                  <span v-for="exercise in record.exercises" :key="exercise" class="exercise-tag">
                    {{ exercise }}
                  </span>
                </div>
              </div>
              <p class="record-notes" v-if="record.notes">{{ record.notes }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 个人设置 -->
    <div v-if="activeTab === 'settings'" class="tab-content">
      <div class="settings-sections">
        <div class="settings-section">
          <h3>基本信息</h3>
          <div class="form-group">
            <label>姓名</label>
            <input v-model="userSettings.name" type="text" class="form-input">
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input v-model="userSettings.phone" type="tel" class="form-input">
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input v-model="userSettings.email" type="email" class="form-input">
          </div>
          <div class="form-group">
            <label>生日</label>
            <input v-model="userSettings.birthday" type="date" class="form-input">
          </div>
        </div>

        <div class="settings-section">
          <h3>健身信息</h3>
          <div class="form-group">
            <label>身高 (cm)</label>
            <input v-model="userSettings.height" type="number" class="form-input">
          </div>
          <div class="form-group">
            <label>体重 (kg)</label>
            <input v-model="userSettings.weight" type="number" class="form-input">
          </div>
          <div class="form-group">
            <label>健身目标</label>
            <select v-model="userSettings.fitnessGoal" class="form-select">
              <option value="weight-loss">减脂塑形</option>
              <option value="muscle-gain">增肌增重</option>
              <option value="strength">力量训练</option>
              <option value="general">综合健身</option>
            </select>
          </div>
          <div class="form-group">
            <label>运动经验</label>
            <select v-model="userSettings.experience" class="form-select">
              <option value="beginner">初学者</option>
              <option value="intermediate">中级</option>
              <option value="advanced">高级</option>
            </select>
          </div>
        </div>

        <div class="settings-section">
          <h3>通知设置</h3>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="userSettings.notifications.course" type="checkbox">
              <span>课程提醒</span>
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="userSettings.notifications.promotion" type="checkbox">
              <span>优惠活动</span>
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="userSettings.notifications.progress" type="checkbox">
              <span>训练进度</span>
            </label>
          </div>
        </div>

        <div class="settings-actions">
          <button @click="saveSettings" class="save-btn">保存设置</button>
          <button @click="resetSettings" class="reset-btn">重置</button>
        </div>
      </div>
    </div>

    <!-- 收藏的私教 -->
    <div v-if="activeTab === 'favorites'" class="tab-content">
      <div class="section-header">
        <h3>收藏的私教</h3>
      </div>

      <div class="favorites-grid">
        <div v-for="trainer in favoriteTrainers" :key="trainer.id" class="favorite-card">
          <img :src="trainer.avatar" :alt="trainer.name" class="trainer-image">
          <div class="trainer-info">
            <h4>{{ trainer.name }}</h4>
            <div class="trainer-meta">
              <span class="rating">⭐ {{ trainer.rating }}</span>
              <span class="experience">{{ trainer.experience }}年经验</span>
            </div>
            <div class="specialties">
              <span v-for="specialty in trainer.specialties" :key="specialty" class="specialty-tag">
                {{ specialty }}
              </span>
            </div>
            <p class="trainer-intro">{{ trainer.introduction }}</p>
          </div>
          <div class="trainer-actions">
            <span class="price">¥{{ trainer.price }}/课时</span>
            <div class="action-buttons">
              <button @click="viewTrainer(trainer.id)" class="view-btn">查看详情</button>
              <button @click="bookTrainer(trainer.id)" class="book-btn">立即预约</button>
              <button @click="removeFavorite(trainer.id)" class="remove-btn">取消收藏</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileView',
  data() {
    return {
      activeTab: 'courses',
      activeCourseFilter: 'all',
      
      userInfo: {
        name: '李小明',
        title: '健身爱好者',
        avatar: 'https://via.placeholder.com/120x120',
        totalSessions: 24,
        completedSessions: 18,
        memberDays: 156
      },
      
      tabs: [
        { id: 'courses', label: '我的课程' },
        { id: 'records', label: '训练记录' },
        { id: 'favorites', label: '收藏私教' },
        { id: 'settings', label: '个人设置' }
      ],
      
      courseFilters: [
        { value: 'all', label: '全部' },
        { value: 'upcoming', label: '即将开始' },
        { value: 'ongoing', label: '进行中' },
        { value: 'completed', label: '已完成' },
        { value: 'cancelled', label: '已取消' }
      ],
      
      courses: [
        {
          id: 1,
          trainer: {
            name: '张健',
            avatar: 'https://via.placeholder.com/50x50'
          },
          type: '减脂塑形',
          date: '2024-01-20',
          time: '10:00-11:00',
          location: '朝阳区健身中心',
          status: 'upcoming',
          totalSessions: 8,
          completedSessions: 0
        },
        {
          id: 2,
          trainer: {
            name: '李美',
            avatar: 'https://via.placeholder.com/50x50'
          },
          type: '瑜伽训练',
          date: '2024-01-15',
          time: '14:00-15:00',
          location: '瑜伽工作室',
          status: 'ongoing',
          totalSessions: 12,
          completedSessions: 8
        },
        {
          id: 3,
          trainer: {
            name: '王强',
            avatar: 'https://via.placeholder.com/50x50'
          },
          type: '力量训练',
          date: '2024-01-10',
          time: '19:00-20:00',
          location: '力量训练区',
          status: 'completed',
          totalSessions: 6,
          completedSessions: 6
        }
      ],
      
      trainingRecords: [
        {
          id: 1,
          date: '2024-01-18',
          time: '10:00',
          title: '全身力量训练',
          duration: 60,
          trainer: {
            name: '张健',
            avatar: 'https://via.placeholder.com/40x40'
          },
          calories: 450,
          intensity: '中等',
          exercises: ['深蹲', '卧推', '硬拉', '引体向上'],
          notes: '今天状态不错，重量有所提升'
        },
        {
          id: 2,
          date: '2024-01-16',
          time: '14:00',
          title: '瑜伽放松课',
          duration: 45,
          trainer: {
            name: '李美',
            avatar: 'https://via.placeholder.com/40x40'
          },
          calories: 180,
          intensity: '轻度',
          exercises: ['拜日式', '战士式', '平衡体式', '冥想'],
          notes: '身心得到很好的放松'
        }
      ],
      
      favoriteTrainers: [
        {
          id: 1,
          name: '张健',
          avatar: 'https://via.placeholder.com/100x100',
          rating: 4.9,
          experience: 5,
          specialties: ['减脂塑形', '功能性训练'],
          introduction: '专注于科学减脂和体态矫正，帮助学员建立健康的生活方式。',
          price: 280
        },
        {
          id: 2,
          name: '李美',
          avatar: 'https://via.placeholder.com/100x100',
          rating: 4.8,
          experience: 3,
          specialties: ['瑜伽', '普拉提'],
          introduction: '温和而有效的训练方式，注重身心平衡和柔韧性提升。',
          price: 250
        }
      ],
      
      userSettings: {
        name: '李小明',
        phone: '138****8888',
        email: 'xiaoming@example.com',
        birthday: '1990-05-15',
        height: 175,
        weight: 70,
        fitnessGoal: 'weight-loss',
        experience: 'intermediate',
        notifications: {
          course: true,
          promotion: false,
          progress: true
        }
      }
    }
  },
  
  computed: {
    filteredCourses() {
      if (this.activeCourseFilter === 'all') {
        return this.courses;
      }
      return this.courses.filter(course => course.status === this.activeCourseFilter);
    }
  },
  
  methods: {
    getStatusText(status) {
      const statusMap = {
        upcoming: '即将开始',
        ongoing: '进行中',
        completed: '已完成',
        cancelled: '已取消'
      };
      return statusMap[status] || status;
    },
    
    cancelCourse(courseId) {
      // 取消课程逻辑
      console.log('取消课程:', courseId);
    },
    
    reschedule(courseId) {
      // 改期逻辑
      console.log('改期课程:', courseId);
    },
    
    rateCourse(courseId) {
      // 评价课程逻辑
      console.log('评价课程:', courseId);
    },
    
    viewProgress(courseId) {
      // 查看进度逻辑
      console.log('查看进度:', courseId);
    },
    
    viewTrainer(trainerId) {
      this.$router.push(`/trainer/${trainerId}`);
    },
    
    bookTrainer(trainerId) {
      this.$router.push(`/booking?trainer=${trainerId}`);
    },
    
    removeFavorite(trainerId) {
      this.favoriteTrainers = this.favoriteTrainers.filter(trainer => trainer.id !== trainerId);
    },
    
    saveSettings() {
      // 保存设置逻辑
      console.log('保存设置:', this.userSettings);
      alert('设置已保存');
    },
    
    resetSettings() {
      // 重置设置逻辑
      console.log('重置设置');
    }
  }
}
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.user-info-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  position: relative;
}

.user-avatar {
  position: relative;
}

.avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.edit-avatar-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.user-details {
  flex: 1;
}

.user-details h2 {
  margin: 0 0 5px 0;
  font-size: 28px;
}

.user-title {
  margin: 0 0 20px 0;
  opacity: 0.8;
  font-size: 16px;
}

.user-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

.edit-profile-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.edit-profile-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.profile-tabs {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-button {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  color: #7f8c8d;
  transition: all 0.3s ease;
}

.tab-button.active {
  background: #3498db;
  color: white;
}

.tab-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.section-header h3 {
  color: #2c3e50;
  margin: 0;
}

.course-filters {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #e9ecef;
  background: white;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.filter-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.course-card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.course-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.trainer-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trainer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.trainer-info h4 {
  margin: 0;
  color: #2c3e50;
}

.course-type {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.course-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.course-status.upcoming {
  background: #fff3cd;
  color: #856404;
}

.course-status.ongoing {
  background: #d4edda;
  color: #155724;
}

.course-status.completed {
  background: #d1ecf1;
  color: #0c5460;
}

.course-status.cancelled {
  background: #f8d7da;
  color: #721c24;
}

.course-details {
  margin-bottom: 15px;
}

.course-time, .course-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #555;
  font-size: 14px;
}

.course-progress {
  margin-top: 10px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #3498db;
  transition: width 0.3s ease;
}

.course-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.course-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #e74c3c;
  color: white;
}

.reschedule-btn {
  background: #f39c12;
  color: white;
}

.rate-btn {
  background: #3498db;
  color: white;
}

.progress-btn {
  background: #27ae60;
  color: white;
}

.records-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.record-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 12px;
}

.record-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.record-date .date {
  font-weight: bold;
  color: #2c3e50;
  font-size: 14px;
}

.record-date .time {
  color: #7f8c8d;
  font-size: 12px;
}

.record-content {
  flex: 1;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.record-header h4 {
  margin: 0;
  color: #2c3e50;
}

.record-duration {
  color: #7f8c8d;
  font-size: 14px;
}

.trainer-avatar-small {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.record-stats {
  display: flex;
  gap: 20px;
  margin: 10px 0;
}

.record-stats .stat {
  display: flex;
  gap: 5px;
  font-size: 14px;
}

.record-stats .label {
  color: #7f8c8d;
}

.record-stats .value {
  color: #2c3e50;
  font-weight: bold;
}

.record-exercises h5 {
  margin: 10px 0 5px 0;
  color: #2c3e50;
}

.exercise-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.exercise-tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.record-notes {
  margin: 10px 0 0 0;
  color: #555;
  font-style: italic;
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.settings-section {
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
}

.settings-section h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #2c3e50;
  font-weight: bold;
}

.form-input, .form-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-label input {
  width: auto !important;
}

.settings-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.save-btn, .reset-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn {
  background: #3498db;
  color: white;
}

.reset-btn {
  background: #95a5a6;
  color: white;
}

.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.favorite-card {
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.favorite-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.trainer-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.trainer-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #7f8c8d;
}

.trainer-intro {
  color: #555;
  line-height: 1.5;
  margin-bottom: 15px;
}

.trainer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.view-btn {
  background: #ecf0f1;
  color: #2c3e50;
}

.book-btn {
  background: #3498db;
  color: white;
}

.remove-btn {
  background: #e74c3c;
  color: white;
}

.add-record-btn {
  background: #27ae60;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

@media (max-width: 768px) {
  .profile-container {
    padding: 15px;
  }
  
  .user-info-card {
    flex-direction: column;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  .profile-tabs {
    flex-wrap: wrap;
  }
  
  .courses-grid, .favorites-grid {
    grid-template-columns: 1fr;
  }
  
  .record-item {
    flex-direction: column;
  }
  
  .course-actions, .action-buttons {
    flex-direction: column;
  }
  
  .settings-actions {
    flex-direction: column;
  }
}
</style>